<template>
  <div id="userRegisterPage">
    <h2 class="title">厚米图库-注册页面</h2>
    <div class="desc">企业级协同云图库</div>
    <a-form :model="formState" name="basic" @finish="doSubmit">
      <a-form-item
          name="userAccount"
          :rules="[
          { required: true, message: '请输入账号!' },
          { min: 3, message: '长度不能小于3' },
          { max: 15, message: '长度不能大于15' },
        ]"
      >
        <a-input
            v-model:value="formState.userAccount"
            placeholder="请输入账号"
        />
      </a-form-item>

      <a-form-item
          name="userPassword"
          :rules="[
          { required: true, message: '请输入密码!' },
          { min: 3, message: '长度不能小于3' },
          { max: 15, message: '长度不能大于15' },
        ]"
      >
        <a-input-password
            v-model:value="formState.userPassword"
            placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item
          name="checkPassword"
          :rules="[
          { required: true, message: '请确认密码!' },
          { min: 3, message: '长度不能小于3' },
          { max: 15, message: '长度不能大于15' },
        ]"
      >
        <a-input-password
            v-model:value="formState.checkPassword"
            placeholder="请确认密码"
        />
      </a-form-item>
      <div class="tips">
        已有账号？
        <RouterLink to="/user/login">去登录</RouterLink>
      </div>

      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 100%"
        >注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {userLoginUsingPost, userRegisterUsingPost} from "@/api/userController.ts";
import {useLoginUserStore} from "@/stores/user.ts";
import router from "@/router";
import {message} from "ant-design-vue";

const formState = reactive<API.UserRegisterDTO>({
  userAccount: "",
  userPassword: "",
  checkPassword: ""
});
const loginUserStore = useLoginUserStore();
const doSubmit = async (values: any) => {
  if (values.userPassword !== values.checkPassword) {
    message.error("两次输入的密码不一致");
    return;
  }
  const res = await userRegisterUsingPost(values);
  console.log(res)
  if (res.code === 0 && res.data) {
    message.success("注册成功");
    await router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("注册失败，" + res.message);
  }
};
</script>

<style scoped>
#userRegisterPage {
  width: 360px;
  height: 100%;
  margin: 0 auto;

  .title {
    text-align: center;
    margin-bottom: 16px;
  }

  .desc {
    color: #bbb;
    text-align: center;
    margin-bottom: 16px;
  }

  .tips {
    text-align: right;
    margin-bottom: 16px;
    color: #bbb;
  }
}
</style>
